<body>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>版本更新</title>

		<style>
			html,
			body {
				height: 100%;
				margin: 0;
				padding: 0;
				background-color: rgba(0, 0, 0, 0.3);
				color: white;
				font-size: 1rem;
			}

			a {
				text-decoration: none;
			}

			.root {
				width: 100%;
				height: 100VH;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				padding: 1.875rem;
				box-sizing: border-box;
			}

			.root .box {
				display: flex;
				flex-direction: column;
				width: 100%;
				height: 80VH;
				background-color: white;
				border: 5%;
				padding-top: 0.625rem;
				border-radius: 2%;
				box-sizing: border-box;
			}

			.root .box .title {
				text-align: center;
				font-weight: bold;
				font-size: 2rem;
				padding: 1rem;
				color: black;
			}

			.root .box .content {
				width: 50VH;
				height: 60%;
			}

			.root .box .description {
				font-size: 1.5rem;
				padding: 0.3rem;
				font-family: cursive;
				color: black;
			}

			.root .box .button-box {
				display: inline-block;
				padding: 1rem 2.75rem;
				border-radius: 1.625rem;
				color: white;
				margin: 2rem 2rem;
				font-weight: bold;
				text-align: center;
				font-family: Helvetica;
				font-size: 1.25rem;
				cursor: pointer;
				letter-spacing: 0.375rem;
				animation: pulse 1.5s infinite;
				transition: transform 0.3s;
				position: relative;
				box-sizing: border-box;
				background: linear-gradient(-75deg, #616BFA, #0094ff, #616BFA, #0094ff, #616BFA);
				background-size: 400%;
				animation: gradient 20s linear infinite;
			}

			.root .box .button-box:hover {
				transform: scale(1.1);
			}

			.root .box .button-box::before {
				opacity: 1;
			}


			@keyframes pulse {
				0% {
					transform: scale(1);
				}

				50% {
					transform: scale(1.2);
				}

				100% {
					transform: scale(1);
				}
			}

			@keyframes gradient {
				0% {
					background-position: 600%;
				}

				100% {
					background-position: 0%;
				}
			}
		</style>

	</head>

	<div class="root">
		<div class="box">
			<div class="title">新版本提醒</div>
			<div class="content">
				<div id="lottie"></div>
			</div>

			<ul id="list-view">
			</ul>

			<a class="button-box" href="http://49.234.150.152/file-service/android/host/web/host.apk">下载新版本</a>

		</div>
	</div>


	<!--引入lottie的js文件地址-->
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.9.1/lottie.min.js"></script>
	<!--引入的js格式文件-->
	<script type="text/javascript" src="update.json"></script>
	<script type="text/javascript">
		//使用lottie

		// 发起fetch请求获取JSON数据
		fetch('update.json')
			.then(response => response.json()) // 解析响应为JSON格式
			.then(data => {
				// 在控制台输出JSON数据
				console.log(data);

				const anim = lottie.loadAnimation({
					container: document.getElementById('lottie'),
					renderer: 'svg', //渲染方式：svg：支持交互、不会失帧；canvas、html：支持3D，支持交互
					loop: true, //循环播放：默认为true
					autoplay: true, //自动播放：默认为true
					//assetsPath:'images/',//图片文件夹的路径(这里可以设置图片地址，如果设置了最终是在这个路径下找图片)
					animationData: data //变量名（还记得上面声明变量接收的json文件或者js文件吧，跟那个接收的名字要一样）
				})

				//然后就是把这段代码放在你想要运行的时候，比如想要在加载之后就执行，那就放在以下代码里
				window.onload = function() {
					anim.play();

				}

				// 创建一个数组来存储要生成的列表项内容
				var items = ['Item 1', 'Item 2'];

				// 获取要插入的列表元素
				var list = document.getElementById('list-view');

				// 遍历数组并生成 <li> 元素
				for (var i = 0; i < items.length; i++) {
					// 创建一个新的 <li> 元素
					var li = document.createElement('li');

					// 设置 <li> 元素的文本内容为数组中对应索引的值
					li.textContent = items[i];

					// 添加 class="description" 属性
					li.setAttribute("class", "description");

					// 将 <li> 元素添加到列表中
					list.appendChild(li);
				}

			})
			.catch(error => {
				console.error('Error fetching the JSON file: ', error);
			});
	</script>
</body>